<template>
    <h4>工具化的统一处理</h4>
    <pre class="note">
    ** 前端开发过程中程序运行时的错误不是都需要处理
    ** node模块加载的缓存机制
        => 因为node同一个项目环境下，相同的模块只会被加载一次，其它的导入过程都是读取缓存对象进行操作
        => 所以同一个模块对象在完成加载后，在项目的任何位置如果对该对象进行了全局设置，所有文件加载的该模块都会生效该配置
        => 因此如果对应的模块即需要被完成全局配置，同时全局配置又需要完成多个不同设定时，需要考虑为该模块提供副本功能
    
    axios的工具定义，需要预留多服务器独立配置操作功能，可以通过axios自带的副本构建工具create完成创建
        <img src="@/assets/error/32.png" alt="" srcset="">
    1. 定义工具文件 src/util/request.js 【文件名可自行选择】
        <img src="@/assets/error/33.png" alt="" srcset="">
    2. 定义请求载入文件 src/api/apiUtilRequest.js 【文件名可自行选择】
        <img src="@/assets/error/34.png" alt="" srcset="">
    3. 组件使用
        <img src="@/assets/error/35.png" alt="" srcset="">  
    </pre>
    <el-alert v-show="flag" title="数据加载失败" type="error" effect="dark" />
    <pre>数据加载 <br> {{ users }}</pre>
    <input type="button" value="sendRequest" @click="sendRequest()">
    <hr>
    <pre>请求参数响应结果 <br> {{ result }} </pre>
    <input v-model="params.a" type="text" placeholder="参数a"/>
    <input v-model="params.b" type="text" placeholder="参数b"/>
    <br>
    <input type="button" value="发送get参数" @click="sendRquestGet()"> <br>
    <input type="button" value="发送post参数" @click="sendRquestPost()"> <br>
</template>

<script>
import { findUserList,sendRquestParams,sendRquestBodyParams } from "@/api/apiUtilRequest.js";
export default {
    data() {
        return {
            flag:false,
            users: [],
            params:{
                a:"",
                b:""
            },
            result:{}
        }
    },
    methods: {
        async sendRequest() {
            try {
                let result = await findUserList()
                // console.log(result);
                this.users = result.users;
            } catch (error) {
                // 再次捕获错误，用于页面提示操作
                this.flag = true;
            }
        },
        async sendRquestGet(){
            let result = await sendRquestParams(this.params)
            this.result = result;
        },
        async sendRquestPost(){
            let result = await sendRquestBodyParams(this.params)
            this.result = result;
        }
    },
}
</script>

<style lang="scss" scoped>

</style>